;
}
// ═════════════════════════════════════════════════════════
// Landscape — takes three palette colors: sky, rock, ground
// Each banner passes a different combination.
// Composition variants differ in mountain shape, sun position, etc.
// ═════════════════════════════════════════════════════════
function Landscape({
skyColor, rockColor, groundColor,
composition = 'desert', // 'desert' | 'plateau' | 'valley' | 'dunes' | 'alpine' | 'coast'
sunPos = {x: 1480, y: 280, r: 130},
sunColor,
mood = 'warm', // warm / cool / dusk
}) {
const sky = mood==='dusk'
? { top: shade(skyColor,0.4), bot: tint(skyColor,0.2) }
: mood==='cool'
? { top: tint(skyColor,0.78), bot: tint(skyColor,0.45) }
: { top: tint(skyColor,0.85), bot: tint(skyColor,0.55) };
const farRock = tint(rockColor, 0.1);
const midRock = shade(rockColor, 0.1);
const nearRock = shade(rockColor, 0.3);
const groundTop = tint(groundColor, 0.1);
const groundBot = shade(groundColor, 0.25);
const sunFill = sunColor || tint(skyColor, 0.6);
const uid = (skyColor+rockColor+groundColor+composition).replace(/[^a-z0-9]/gi,'');
// composition variants
const paths = {
desert: {
far: 'M0,440 Q220,380 420,420 Q620,460 820,400 Q1020,360 1220,420 Q1420,470 1620,410 Q1780,370 1920,420 L1920,800 L0,800 Z',
midGroup: (
),
near: 'M0,640 Q220,620 440,635 Q660,650 880,630 Q1100,610 1320,640 Q1540,665 1740,635 Q1860,625 1920,635 L1920,800 L0,800 Z',
ground: 'M0,710 L1920,690 L1920,800 L0,800 Z',
},
plateau: {
far: 'M0,460 L280,460 L380,380 L720,380 L820,460 L1200,460 L1320,400 L1600,400 L1720,460 L1920,460 L1920,800 L0,800 Z',
midGroup: (
),
near: 'M0,660 L420,660 L460,630 L900,630 L950,660 L1340,660 L1380,640 L1780,640 L1820,660 L1920,660 L1920,800 L0,800 Z',
ground: 'M0,710 L1920,700 L1920,800 L0,800 Z',
},
valley: {
far: 'M0,500 Q240,380 480,440 Q680,500 780,360 Q880,240 1020,360 Q1160,480 1380,420 Q1600,360 1920,460 L1920,800 L0,800 Z',
midGroup: (
),
near: 'M0,700 Q320,670 640,695 Q960,720 1280,690 Q1600,660 1920,700 L1920,800 L0,800 Z',
ground: 'M0,740 L1920,735 L1920,800 L0,800 Z',
},
dunes: {
far: 'M0,520 Q480,420 960,500 Q1440,580 1920,480 L1920,800 L0,800 Z',
midGroup: (
),
near: 'M0,700 Q380,660 760,690 Q1140,720 1520,680 Q1760,660 1920,690 L1920,800 L0,800 Z',
ground: 'M0,730 Q520,720 1000,725 Q1480,730 1920,720 L1920,800 L0,800 Z',
},
alpine: {
far: 'M0,520 L240,300 L380,440 L560,260 L760,440 L940,230 L1160,440 L1360,310 L1580,460 L1760,320 L1920,450 L1920,800 L0,800 Z',
midGroup: (
),
near: 'M0,680 Q300,660 600,675 Q900,690 1200,665 Q1500,640 1920,680 L1920,800 L0,800 Z',
ground: 'M0,730 L1920,720 L1920,800 L0,800 Z',
},
coast: {
far: 'M0,480 Q400,440 800,470 Q1200,500 1600,460 Q1800,440 1920,460 L1920,800 L0,800 Z',
midGroup: (
),
near: 'M0,680 Q400,670 800,685 Q1200,700 1600,680 Q1800,672 1920,685 L1920,800 L0,800 Z',
ground: 'M0,740 L1920,735 L1920,800 L0,800 Z',
},
};
const p = paths[composition] || paths.desert;
return (
);
}
// ── Shell ────────────────────────────────────────────────
function Shell({ children, bg }) {
return (
{children}
);
}
// ── Nav ──────────────────────────────────────────────────
// Minimal: logo on the left only. CTAs live in the site header and footer.
// Inline Orbit mark — matches orbit-mark.jsx geometry. `accent` paints the
// disc; `onDark` flips the ring+S to a light or dark tint to stay legible.
function NavOrbitMark({ size = 26, accent = '#7a9b7e', onDark = false }) {
const cx = 512, cy = 512, r = 320;
const ringR = r * 0.52;
const sw = r * 0.075;
const a1 = (135 * Math.PI) / 180;
const a2 = (-45 * Math.PI) / 180;
const p1 = { x: cx + ringR * Math.cos(a1), y: cy + ringR * Math.sin(a1) };
const p2 = { x: cx + ringR * Math.cos(a2), y: cy + ringR * Math.sin(a2) };
const reachX = ringR * 1.15;
const c1 = { x: p1.x + reachX, y: p1.y };
const c2 = { x: p2.x - reachX, y: p2.y };
const sPath = `M ${p1.x} ${p1.y} C ${c1.x} ${c1.y}, ${c2.x} ${c2.y}, ${p2.x} ${p2.y}`;
const uid = `nm-${accent.replace('#','')}`;
// Match the website-nav OrbitIcon: warm cream paper bg, tone disc.
return (
);
}
function Nav({ onDark=false, active, accent='#8b4a52' }) {
const c = onDark ? '#f2efe8' : INK;
return (
);
}
// ── Eyebrow ──────────────────────────────────────────────
function Eyebrow({num,label,tone,onDark}) {
const c = onDark ? 'rgba(242,239,232,0.7)' : INK_SOFT;
return (
{num}
{label}
);
}
// Placeholder box for hero object (designer drops real art here later)
function HeroPlaceholder({ w=380, h=260, x=0, y=0, note, rotate=0, tone='#8a7a6f' }) {
return (
);
}
// ═════════════════════════════════════════════════════════
// 00 — HERO BANNER
// Colors: ochre (sky) + burgundy (rock) + taupe (ground)
// Composition: desert, warm dusk
// ═════════════════════════════════════════════════════════
function HeroBanner({ tone = PALETTE.moss }) {
// Greens + light blue: teal sky + moss mid + sage ground
const sky = PALETTE.teal;
const mid = PALETTE.moss;
const ground = PALETTE.sage;
const skyTop = tint(sky, 0.72);
const skyBot = tint(sky, 0.92);
return (
{/* Open-space landscape — no sun, horizontal layering, very wide */}
);
}
// ═════════════════════════════════════════════════════════
// 01 — HOME
// Colors: coral (sky) + ochre (rock) + sage (ground)
// Composition: valley, warm morning
// ═════════════════════════════════════════════════════════
function HomeBanner({ tone = PALETTE.coral }) {
// Flat yellow/orange morning palette — distinct from Hero's ochre.
const sky = '#eaf0d8'; // pale warm sky
const skyTop = '#f6f0d4'; // cream top
const skyBot = '#f2c37a'; // warm orange horizon
const sunYel = '#f7c948'; // bright yellow sun
const rayYel = '#f2b23a'; // slightly deeper yellow ray
const raySharp= '#e88c3a'; // orange accent ray
const mid = PALETTE.moss; // mountains stay moss green
const ground = PALETTE.sage;
const SUN_X = 1350, SUN_Y = 360, SUN_R = 110;
return (
);
}
// ═════════════════════════════════════════════════════════
// 02 — STUDIO
// Colors: plum (sky) + burgundy (rock) + terracotta (ground)
// Composition: alpine, dusk (dark mode)
// ═════════════════════════════════════════════════════════
function StudioBanner({ tone = PALETTE.plum }) {
// Keep dusk palette: plum sky + burgundy rock + terracotta ground
const sky = PALETTE.plum;
const skyTop = shade(sky, 0.45);
const skyMid = shade(sky, 0.15);
const skyBot = tint(PALETTE.terracotta, 0.15);
const rock = PALETTE.burgundy;
const ground = PALETTE.terracotta;
const accent = PALETTE.terracotta;
const moonCol = tint(PALETTE.terracotta, 0.5);
return (
);
}
// ═════════════════════════════════════════════════════════
// 03 — LIBRARY
// Colors: teal (sky) + moss (rock) + sage (ground)
// Composition: coast, cool
// ═════════════════════════════════════════════════════════
function LibraryBanner({ tone = PALETTE.moss }) {
// Warm intellectual archive — opposite end of the spectrum from dusk Studio.
const paper = '#eee3cc'; // warm parchment
const paperHi = '#f4ead5'; // lighter top
const paperLo = '#e3d3b3'; // warmer foot
const bronze = '#8a5a34'; // warm bronze
const taupe = '#9a7a5e'; // warm taupe
const taupeLo = '#a89378'; // lighter taupe
const sage = '#8a9470'; // sage accent
const sageDk = '#6f7a58';
const ink = '#2a2218'; // warm near-black
const hairline= 'rgba(42,34,24,0.12)';
// shelf layout
const shelves = [
{ y: 380, items: [
{w:26,h:200,c:bronze},{w:22,h:220,c:taupe},{w:32,h:210,c:sageDk},
{w:18,h:230,c:bronze},{w:28,h:200,c:taupeLo},{w:22,h:220,c:ink,tilt:-8},
{w:36,h:210,c:sage},{w:24,h:230,c:bronze},{w:20,h:200,c:taupe},
{w:30,h:220,c:sageDk},{w:16,h:210,c:bronze},{w:26,h:230,c:taupeLo},
]},
{ y: 620, items: [
{w:22,h:180,c:taupeLo},{w:30,h:200,c:bronze},{w:20,h:210,c:sage},
{w:26,h:190,c:ink,tilt:7},{w:18,h:210,c:taupe},{w:32,h:200,c:bronze},
{w:22,h:220,c:sageDk},{w:28,h:200,c:taupeLo},{w:20,h:210,c:bronze},
{w:34,h:200,c:sage},{w:18,h:210,c:taupe},{w:26,h:200,c:bronze},
{w:22,h:220,c:ink},{w:30,h:210,c:sageDk},{w:20,h:200,c:taupeLo},
{w:24,h:220,c:bronze},{w:28,h:210,c:sage},{w:20,h:200,c:taupe},
]},
];
// Render book spines laid out across a shelf; right-anchored so they
// fan in from the right side of the banner.
const renderShelf = (sh, idx) => {
const baseY = sh.y;
let cursor = 1880; // right margin
const books = sh.items.map((b, i) => {
const x = cursor - b.w;
cursor -= (b.w + 6);
const hueVariant = i % 4 === 0;
// leave a small patch empty to breathe, especially near text
const drawable = x > 900;
if (!drawable) return null;
const tilt = b.tilt || 0;
return (
{/* top edge highlight */}
{/* bottom shadow band on spine */}
{/* gilt band */}
{hueVariant && }
{hueVariant && }
{/* vertical title tick */}
);
});
// books leaning stack (a small cluster laid down on the shelf)
const leanX = 920;
const leanStack = idx === 0 ? (
) : null;
return (
{/* shelf board */}
{/* shadow under shelf */}
{books}
{leanStack}
);
};
return (
);
}
// ═════════════════════════════════════════════════════════
// 04 — PROJECTS
// Colors: steel (sky) + lavender (rock) + stone (ground)
// Composition: plateau, cool
// ═════════════════════════════════════════════════════════
function ProjectsBanner({ tone = PALETTE.steel }) {
// Cool palette — lavender / steel / stone with a soft warm accent
const skyTop = '#e7e6ee';
const skyBot = '#c9c5d6';
const rangeBack= shade(PALETTE.lavender, 0.05);
const rangeFro = shade(PALETTE.steel, 0.1);
const warm = '#c0886a';
const plum = '#6b5d7a'; // icon/logo accent — sets Projects apart from the warm-brown sections
const inkCool = '#2b2838';
const muted = 'rgba(43,40,56,0.65)';
const hair = 'rgba(43,40,56,0.12)';
return (
);
}
// ═════════════════════════════════════════════════════════
// 05 — HEALTH
// Sunset / sundown. Warm golds, soft oranges, deep purples, sage accent.
// Restorative, reflective. The creative pause.
// Same landscape / text system as Projects (04).
// ═════════════════════════════════════════════════════════
function HealthBanner({ tone = PALETTE.coral }) {
// Sunset palette — warm gold sky fading to purple, sage ground accents
const skyTop = '#e9c9a3'; // warm peach top
const skyMid = '#efb985'; // golden orange band
const skyBot = '#b88ca6'; // dusty mauve horizon
const sunCol = '#f0b268'; // soft golden sun
const sunGlow = tint(sunCol, 0.3);
const rangeBack= shade(PALETTE.plum, 0.25); // deep purple mountain range
const rangeFro = shade(PALETTE.burgundy, 0.2); // warm deep near range
const groundCol= shade(PALETTE.moss, 0.35); // sage evening ground
const accent = shade(PALETTE.moss, 0.15); // sage accent for italic
const inkWarm = '#2a1f1a';
const muted = 'rgba(42,31,26,0.65)';
const hair = 'rgba(42,31,26,0.12)';
return (
Track your care,
balance creation.
Sleep. Energy. Stress. Desk hours. Hearing health. Workload awareness. Your wellbeing, tracked and visible.
window.dispatchEvent(new CustomEvent('cos-open-waitlist',{detail:{accent:'#c4833d'}}))}>
Join the waitlist →
window.dispatchEvent(new CustomEvent('cos-open-demo',{detail:{accent:'#c4833d'}}))}>
Book a demo
);
}
// ═════════════════════════════════════════════════════════
// 06 — ARIA
// Ethereal, minimalist, clarifying. Soft light, particles, clarity emerging.
// Soft yellows, whites, light grays. Air and light, not landscape.
// ═════════════════════════════════════════════════════════
function AriaBanner({ tone = PALETTE.ochre }) {
const bg = '#f5f1e6'; // warm off-white
const bgTop = '#fbf8ef'; // brighter at top
const bgBot = '#ebe6d7'; // soft warm gray at bottom
const lightRay = '#f3e4b8'; // pale gold light
const lightHot = '#f0d37a'; // warmer light core
const mistGray = '#dcd7c9'; // soft warm gray mist
const accent = '#c9a34a'; // quiet ochre accent
const inkAir = '#2b2821';
const muted = 'rgba(43,40,33,0.6)';
const hair = 'rgba(43,40,33,0.12)';
return (
);
}
Object.assign(window, {
PALETTE,
HeroBanner,
HomeBanner,
StudioBanner,
LibraryBanner,
ProjectsBanner,
HealthBanner,
AriaBanner,
});